<template>
	<view class="payDetail">
		<view class="box">
			<view class="title">
				<image class="left" src="https://imgs.ynz666.com/test/2023/08/02/NzgyYThiODAwNTFlY2ZhMGYxM2YzMmMyZmRkODVkMWE=.png"></image>
				<view class="right">
					{{detailData.storeName}}
				</view>
			</view>
			<view class="con">
				<view class="con_item" v-for="(item,index) in showShopList" :key="index">
					<image class="left" :src="item.goodsImg"></image>
					<view class="right">
						<view class="r_top">
							{{item.goodsName}}
						</view>
						<view class="r_bottom">
							<view class="view1">
								¥{{item.goodsPrice?item.goodsPrice/100:0}}
							</view>
							<view class="view1">
								x{{item.num}}
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="item">
				<view class="left">
					商品金额
				</view>
				<view class="right">
					{{detailData.totalPrice?detailData.totalPrice/100:0}}
				</view>
			</view>
			<view class="item">
				<view class="left rightR">
					红包抵扣
				</view>
				<view class="righ rightR">
          {{detailData.freeAmount?detailData.freeAmount/100:0}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					抵扣后金额
				</view>
				<view class="right rightR2">
					{{detailData.price?detailData.price/100:0}}
				</view>
			</view>
		</view>
	
	  <view class="footer">
	  	<view class="fot_box">
	  		<view class="left">
	  			<view class="left_t">
	  				<view class="view1">
	  					¥
	  				</view>
						<view class="view2">
							{{detailData.price?detailData.price/100:0}}
						</view>
	  			</view>
					<view class="left_b">
						<view class="view1">
							红包抵扣价
						</view>
						<view class="view2">
							优惠¥{{detailData.freeAmount?detailData.freeAmount/100:0}}
						</view>
					</view>
	  		</view>
				<view class="right">
					<view class="right_btn" @click="buyCoupon">
						快速支付
					</view>
					<button v-if="!mineInfo.phone && mineInfo.phone.length!==11" open-type="getPhoneNumber" @getphonenumber.stop="onGetPhoneNumber"></button>
				</view>
	  	</view>
	  </view>
	</view>
</template>

<script>
		var app = getApp();
		
	import { getIUserDiscount,getIUserPay } from '../../apis/index.js';
	import http from '@/utils/request/http.js';
	import gongType from '@/utils/debounce.js';
	export default {
		data() {
			return {
				mineInfo:{},
				detailData:{
					price:0,
					freeAmount:0,
					storePrice:0,
					storeImg:'',
					storeName:'',
				},
				
				storeId:'',
				shopBuyList:[],
				
				showShopList:[],
			}
		},
		onLoad(options) {
			console.log(options, "options")
			if (options.storeId) {
				this.storeId=options.storeId
				this.shopBuyList=uni.getStorageSync('shopBuyList');
				this.getIUserDiscountData();
			}
		},
		onShow(){
			let that = this;
			that.mineInfo = uni.getStorageSync('mineInfo');
			
		},
		methods: {
			getIUserDiscountData(arr){
				let data={
					goodsInfo:this.shopBuyList,
					storeId:this.storeId
				}
				getIUserDiscount(data).then(res=>{
					this.detailData=res.data
					this.showShopList=res.data.goodsInfo
				})
			},
			// 手机号授权
			onGetPhoneNumber(e){
				let that = this;
				app.GetMobile(e,function(e){
					// that.phoneLoginFlag = true;
					if(that.inviteId !==''){
						app.isLogin({id:that.inviteId},function(login){
							that.mineInfo = login;
							that.buyCoupon();
						});
					}else {
						app.getUserInfo(function(lRes){
							that.mineInfo = lRes;
							that.buyCoupon();
						})
					}
				});
			},
			// 确认支付
			buyCoupon:gongType.debounce(function (e){
				let that = this;
				let parP={
					// amount:that.detailData.totalPrice,
					goodsInfo:that.shopBuyList,
					storeId:that.storeId,
				}
				getIUserPay(parP).then(payment=>{
					switch(payment.code){
						case 200:
							app.WxPayMent(payment.data).then( res => {
								app.getUserInfo(function(lRes){
									that.mineInfo = lRes;
									app.globalData.orderType = 4;
									setTimeout(function() {
										uni.switchTab({
											url: '/pages/order/order'
										});
									}, 1000)
									
								})
							})
						break;
						default:
							uni.showToast({
								title:payment.message,
								icon:'none'
							})
						break;
					}
				})
			}, 1000),
		}
	}
</script>

<style lang="scss" sc>
page{
		background: #F4F4F4;
	}
	
	.box{
		margin: 20rpx 20rpx 0;
		background: #fff;
		border-radius: 20rpx;
		.title{
			display: flex;
			align-items: center;
			padding: 32rpx 0;
			margin: 0 20rpx;
			border-bottom:1rpx solid rgba(240, 240, 240, 1);
			.left{
				width: 24rpx;
				height: 24rpx;
			}
			.right{
				padding-left: 12rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
		.con{
			margin: 0 20rpx;
			border-bottom:1rpx solid rgba(240, 240, 240, 1);
			.con_item{
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;
				padding-top: 24rpx;
				.left{
					width: 100rpx;
					height: 100rpx;
					background: #D8D8D8;
					border-radius: 20rpx;
				}
				.right{
					flex: 1;
					padding-left: 32rpx;
					.r_top{
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}
					.r_bottom{
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-top: 4rpx;
						.view1{
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #000000;
						}
						.view2{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #000000;
						}
					}
				}
			}
		}
		.item{
			margin: 0 25rpx;
			padding: 34rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			.right{
				font-size: 26rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.rightR{
				font-size: 32rpx;
				color: rgba(244, 59, 0, 1);
				font-weight: bold;
			}
			.rightR2{
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
	.footer{
		position: fixed;
		bottom: 100rpx;
		height: 120rpx;
		width: 100%;
		.fot_box{
			margin: 0 20rpx;
			height: 100%;
			border-radius: 60rpx;
			display: flex;
			.left{
				width: 433rpx;
				height: 120rpx;
				background: #FF9C00;
				box-shadow: -4rpx 3rpx 29rpx 0rx rgba(161,39,0,0.5);
				border-radius: 60rpx 0rpx 0rpx 60rpx;
				.left_t{
					display: flex;
					align-items: baseline;
					padding: 15rpx 0 0 72rpx;
					.view1{
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}
					.view2{
						font-size: 36rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
				.left_b{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					opacity: 0.7;
					padding: 9rpx 0 0 72rpx;
					.view2{
						padding-left: 20rpx;
					}
				}
			}
			.right{
				width: 276rpx;
				height: 120rpx;
				background: #F43B00;
				box-shadow: -3rpx 3rpx 28rpx 0rpx rgba(161,39,0,0.5);
				border-radius: 0rpx 60rpx 60rpx 0rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				position: relative;
				.right_btn{
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				button {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					opacity:0;
				}
			}
		}
	}
</style>
